<!-- 面包屑 -->

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="item in breadcrumbs" :key="item.path">{{ item.meta?.title }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router'
const route = useRoute();

// 根据路由切换的页面不同，面包屑会动态发生改变
// 通过`route.matched`直接拿到所有路由的展开数组，然后再渲染到面包屑组件`el-breadcrumb`。
const breadcrumbs = computed(()=> route.matched);

</script>

<style scoped lang="scss">
.el-breadcrumb {
    background: #fff;
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 30px;
}
</style>